<template>
  <div>
    <a-modal
      v-model:visible="showBoard"
      :body-style="{ height: '100%', padding: '0' }"
      :footer="false"
      fullscreen
      unmount-on-close
      :title="t['画板']"
      hide-title
    >
      <div class="flex h-full flex-col">
        <BoardHead />
        <div class="canvas-wrapper">
          <TemplateVue></TemplateVue>
          <CanvasVue />
          <Attr />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { showBoard } from "../data/form";
import Attr from "./attr/Attr.vue";
import CanvasVue from "./canvas/Canvas.vue";
import "./data/event";
import BoardHead from "./head/BoardHead.vue";
import TemplateVue from "./template/Template.vue";

const t = translate("公共模块");
</script>

<style lang="scss" scoped>
.canvas-wrapper {
  flex: 1;
  overflow-y: hidden;
  @apply flex gap-3 flex-1;
}
</style>
